import React, { useState } from 'react'
import CounterShow from './CounterShow'
import CounterUpdate from './CounterUpdate'

export default function Counter() {

  const [count, setCount] = useState(0)

  const increment = (num) => {
    setCount(count + num)
  } 
  const decrement = (num) => {
    setCount(count - num)
  } 
  const incrementIfOdd = (num) => {
    if (count%2===1) {
      setCount(count + num)
    }
  } 
  const incrementAsync = (num) => {
    setTimeout(() => {
      setCount(count + num)
    }, 1000);
  } 


  return (
    <div>
      <CounterShow count={count}/>
      <hr/>
      <CounterUpdate increment={increment} decrement={decrement} incrementIfOdd={incrementIfOdd} incrementAsync={incrementAsync}/>
    </div>
  )
}
